<template>
    <h1>{{ "parent" }}</h1>
    <p>Count: {{ count }}</p>
    <child @changeCount="changeCount" :count="count" ref="childRef" />
</template>

<script lang="ts">
import { onMounted, ref, nextTick } from "vue";
import child from "./child.vue";

export default {
    name: "setup-parent",
    components: {
        child,
    },
    setup(props, context) {
        // props 和 context 都是响应式的
        // props 要在 props:[] 里声明
        // setup 中没有 this，可以通过 context 访问
        console.log("setup", props, context);

        let count = ref(0);

        const changeCount = (num: number) => {
            count.value = count.value + num;
        };

        onMounted(async () => {
            await nextTick(); // 等待 DOM 更新完成
            // 可以在这里访问子组件的引用
            console.log("Child component onMounted ref:", context.$refs);
            console.log("Child component onMounted children:", context.$children);
        });

        return {
            count,
            changeCount,
        };
    },
    mounted() {
        // 可以在这里访问子组件的引用
        console.log("Child component mounted ref:", this.$refs.childRef);
        this.$nextTick(() => {
            console.log("Child component updated children:", this.$children);
        });
    },
    updated() {
        // 组件更新时的逻辑
        console.log("Child component updated children:", this.$children);
    },
};
</script>

<style scoped></style>
